import Webform from 'formiojs/Webform';
import WebformBuilder from 'formiojs/WebformBuilder';
import { fastCloneDeep, bootstrapVersion } from 'formiojs/utils/utils';
import Components from 'formiojs/components/Components';
import '../components/builder';

class DisplayBuilder extends WebformBuilder {
  constructor(element: any, form: any, options: any) {
    super(element, form, options);
  }

  get defaultGroups() {
    return {
      custom: {
        title: 'Custom',
        weight: 0,
        default: true,
      },
      basic: {
        title: 'Basic',
        weight: 10,
      },
      advanced: {
        title: 'Advanced',
        weight: 20,
      },
      layout: {
        title: 'Layout',
        weight: 30,
      },
      data: {
        title: 'Data',
        weight: 40,
      },
      premium: {
        title: 'Premium',
        weight: 50,
      },
    };
  }

  // /**
  //  * Translate a text using the i18n system.
  //  *
  //  * @param {string} text - The i18n identifier.
  //  * @param {Object} params - The i18n parameters to use for translation.
  //  */
  // t(text: String, params: any, ...args: any[]) {
  //   if (!text) {
  //     return '';
  //   }
  //   params = params || {};
  //   // // Use _userInput: true to ignore translations from defaults
  //   // if (text in enTranslation && params._userInput) {
  //   //   return text;
  //   // }
  //   // params._userInput = false; // 强制进入 i18n 模式
  //   return super.t(text, params, ...args);
  // }

  // /*
  //  * render 组件 render 的过程
  //  */
  // render() {
  //   console.log('===========> render');
  //   return super.render();
  // }

  // /*
  // * 自定义 edit 弹窗组件
  // */
  // editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {
  //   if (!component.key) {
  //     return;
  //   }
  //   let saved = false;
  //   const componentCopy = fastCloneDeep(component);
  //   let ComponentClass = Components.components[componentCopy.type];
  //   const isCustom = ComponentClass === undefined;
  //   isJsonEdit = isJsonEdit || isCustom;
  //   ComponentClass = isCustom ? Components.components.unknown : ComponentClass;
  //   // Make sure we only have one dialog open at a time.
  //   if (this.dialog) {
  //     this.dialog.close();
  //     this.highlightInvalidComponents();
  //   }

  //   // This is the render step.
  //   const editFormOptions = _.clone(_.get(this, 'options.editForm', {}));
  //   if (this.editForm) {
  //     this.editForm.destroy();
  //   }

  //   // Allow editForm overrides per component.
  //   const overrides = _.get(this.options, `editForm.${componentCopy.type}`, {});

  //   // Pass along the form being edited.
  //   editFormOptions.editForm = this.form;
  //   editFormOptions.editComponent = component;
  //   editFormOptions.flags = flags;
  //   this.editForm = new Webform(
  //     {
  //       ..._.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit']),
  //       language: this.options.language,
  //       ...editFormOptions
  //     }
  //   );

  //   this.editForm.form = (isJsonEdit && !isCustom) ? {
  //     components: [
  //       {
  //         type: 'textarea',
  //         as: 'json',
  //         editor: 'ace',
  //         weight: 10,
  //         input: true,
  //         key: 'componentJson',
  //         label: 'Component JSON',
  //         tooltip: 'Edit the JSON for this component.'
  //       },
  //       {
  //         type: 'checkbox',
  //         key: 'showFullSchema',
  //         label: 'Full Schema'
  //       }
  //     ]
  //   } : ComponentClass.editForm(_.cloneDeep(overrides));
  //   const instance = new ComponentClass(componentCopy);
  //   this.editForm.submission = isJsonEdit ? {
  //     data: {
  //       componentJson: component,
  //       showFullSchema: this.options.showFullJsonSchema
  //     },
  //   } : {
  //       data: instance.component,
  //     };

  //   if (this.preview) {
  //     this.preview.destroy();
  //   }
  //   if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {
  //     this.preview = new Webform(_.omit({ ...this.options, preview: true }, [
  //       'hooks',
  //       'builder',
  //       'events',
  //       'attachMode',
  //       'calculateValue'
  //     ]));
  //   }

  //   this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });
  //   this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
  //     componentInfo: ComponentClass.builderInfo,
  //     editForm: this.editForm.render(),
  //     preview: this.preview ? this.preview.render() : false,
  //     helplinks: this.helplinks,
  //   }));

  //   this.dialog = this.createModal(this.componentEdit, _.get(this.options, 'dialogAttr', {}));

  //   // This is the attach step.
  //   this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
  //   this.updateComponent(componentCopy);

  //   this.editForm.on('change', (event) => {
  //     if (event.changed) {
  //       if (event.changed.component && event.changed.component.key === 'showFullSchema') {
  //         const { value } = event.changed;
  //         this.editForm.submission = {
  //           data: {
  //             componentJson: value ? instance.component : component,
  //             showFullSchema: value
  //           },
  //         };
  //         return;
  //       }
  //       // See if this is a manually modified key. Treat custom component keys as manually modified
  //       if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {
  //         componentCopy.keyModified = true;
  //       }

  //       if (event.changed.component && (['label', 'title'].includes(event.changed.component.key))) {
  //         // Ensure this component has a key.
  //         if (isNew) {
  //           if (!event.data.keyModified) {
  //             this.editForm.everyComponent(component => {
  //               if (component.key === 'key' && component.parent.component.key === 'tabs') {
  //                 component.setValue(_.camelCase(
  //                   event.data.title ||
  //                   event.data.label ||
  //                   event.data.placeholder ||
  //                   event.data.type
  //                 ).replace(/^[0-9]*/, ''));

  //                 return false;
  //               }
  //             });
  //           }

  //           if (this.form) {
  //             let formComponents = this.findNamespaceRoot(parent.formioComponent.component);
  //             // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys
  //             formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);

  //             // Set a unique key for this component.
  //             BuilderUtils.uniquify(formComponents, event.data);
  //           }
  //         }
  //       }

  //       // Update the component.
  //       this.updateComponent(event.data.componentJson || event.data, event.changed);
  //     }
  //   });
  //   this.addEventListener(this.componentEdit.querySelector('[ref="cancelButton"]'), 'click', (event) => {
  //     event.preventDefault();
  //     this.editForm.detach();
  //     this.emit('cancelComponent', component);
  //     this.dialog.close();
  //     this.highlightInvalidComponents();
  //   });

  //   this.addEventListener(this.componentEdit.querySelector('[ref="removeButton"]'), 'click', (event) => {
  //     event.preventDefault();
  //     // Since we are already removing the component, don't trigger another remove.
  //     saved = true;
  //     this.editForm.detach();
  //     this.removeComponent(component, parent, original);
  //     this.dialog.close();
  //     this.highlightInvalidComponents();
  //   });

  //   this.addEventListener(this.componentEdit.querySelector('[ref="saveButton"]'), 'click', (event) => {
  //     event.preventDefault();
  //     if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
  //       this.editForm.setPristine(false);
  //       this.editForm.showErrors();
  //       return false;
  //     }
  //     saved = true;
  //     this.saveComponent(component, parent, isNew, original);
  //   });

  //   const dialogClose = () => {
  //     this.editForm.destroy(true);
  //     if (this.preview) {
  //       this.preview.destroy(true);
  //       this.preview = null;
  //     }
  //     if (isNew && !saved) {
  //       this.removeComponent(component, parent, original);
  //       this.highlightInvalidComponents();
  //     }
  //     // Clean up.
  //     this.removeEventListener(this.dialog, 'close', dialogClose);
  //     this.dialog = null;
  //   };
  //   this.addEventListener(this.dialog, 'close', dialogClose);

  //   // Called when we edit a component.
  //   this.emit('editComponent', component);
  // }
}

export default DisplayBuilder;
